<template>
  <el-dialog
    v-model="_modelValue"
    :fullscreen="state.fullscreen"
    class="base-dialog"
    draggable
    :width="props.width"
    v-bind="$attrs"
  >
    <div :style="{ height: props.height }">
      <slot></slot>
    </div>

    <template #header>
      <div class="header">
        <span>{{ props.title || "标题" }}</span>
        <el-icon class="icon" @click="_fullscreen = !_fullscreen">
          <template v-if="state.fullscreen">
            <Connection />
          </template>

          <template v-else>
            <FullScreen />
          </template>
        </el-icon>
      </div>
    </template>

    <template #footer>
      <slot name="footer">
        <div class="dialog-footer">
          <el-button @click="handleBtnClose">{{ props.closeBtnText }}</el-button>
          <el-button :loading="state.loading" type="primary" @click="handleBtnConfirm">{{
            props.confirmBtnText
          }}</el-button>
        </div>
      </slot>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, watch, useAttrs, reactive } from "vue";
import { FullScreen, Connection } from "@element-plus/icons-vue";

type Props = {
  /** 显示/隐藏 */
  modelValue: boolean;
  /** 全屏 */
  fullscreen?: boolean;
  /** 标题 */
  title?: string;
  /** 宽度 */
  width?: string;
  /** 高度 */
  height?: string;
  /** confirm 按钮文本 */
  confirmBtnText?: string;
  /** close 按钮文本 */
  closeBtnText?: string;
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  fullscreen: false,
  title: "",
  width: "50vw",
  height: "60vh",
  closeBtnText: "取 消",
  confirmBtnText: "确 定"
});

console.log("props: ", props);

const state = reactive({
  loading: false,
  fullscreen: false
});

const attrs = useAttrs();
const emit = defineEmits(["update:modelValue", "update:fullscreen"]);

const _modelValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

const _fullscreen = computed({
  get() {
    return props.fullscreen;
  },
  set(val) {
    emit("update:fullscreen", val);
  }
});

watch(
  () => props.fullscreen,
  val => {
    state.fullscreen = val;
    emit("update:fullscreen", val);
  },
  { immediate: true }
);

const handleBtnConfirm = () => {
  if (attrs.onConfirm && typeof attrs.onConfirm === "function") {
    state.loading = true;
    attrs.onConfirm(
      () => (state.loading = false),
      () => {
        state.loading = false;
        emit("update:modelValue", false);
      }
    );
  } else {
    state.loading = false;
    emit("update:modelValue", false);
  }
};

const handleBtnClose = () => {
  if (attrs.onClose && typeof attrs.onClose === "function") {
    state.loading = true;
    attrs.onClose(() => {
      state.loading = false;
      emit("update:modelValue", false);
    });
  } else {
    state.loading = false;
    emit("update:modelValue", false);
  }
};
</script>

<style lang="scss">
.base-dialog {
  .el-dialog__header {
    margin: 0;
    min-height: 20px;
    border-bottom: 1px solid #f0f0f0;
  }
  .el-dialog__headerbtn {
    width: 40px;
    right: 6px;
  }
  .header {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 16px;
      color: #303133;
    }
    .icon {
      margin-right: 22px;
      margin-top: -4px;
      font-size: 15px;
      padding: 8px;
      cursor: pointer;
      color: #909399;
      &:hover {
        color: #409eff;
      }
    }
  }
}
</style>
